<template>
  <a-list class="demo-loadmore-list" item-layout="vertical" :data-source="props.postList">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta>
          <template #description>
            <span><p v-html="item.content.length >= 1000 ? item.content.substring(0, 999) + '.....' : item.content"></p></span>
          </template>
          <template #title>
            <span style="font-weight: bold"><p v-html="item.title"></p></span>
          </template>
        </a-list-item-meta>
        <div class="footer">
          <span class="tagList" v-for="(tag, index) in item?.tagList" :key="index">
            <a-tag v-if="index % 3 == 0" color="success">{{ tag }} </a-tag>
            <a-tag v-if="index % 3 == 1" color="processing">{{ tag }}</a-tag>
            <a-tag v-if="index % 3 == 2" color="error">{{ tag }}</a-tag>
          </span>
        </div>
      </a-list-item>
    </template>
  </a-list>
</template>
<script setup lang="ts">
import { withDefaults, defineProps } from 'vue';
import { post } from '@/model/data/post';
interface Props {
  postList: post[];
}
const props = withDefaults(defineProps<Props>(), {
  postList: () => []
});
</script>
<style scoped>
.content {
  display: flex;
}
</style>
@/model/data/post
